<template>
	<view class="edit">
		<u--form labelPosition="top" :model="passwordForm" labelWidth="200" :rules="passwordRules" ref="uForm"
			class="list">
			<u-form-item label="邮箱" prop="mail">
				<u--input v-model="passwordForm.mail" placeholder="请输入邮箱">
				</u--input>
			</u-form-item>
			<u-form-item label="新密码" prop="password">
				<u--input v-model="passwordForm.password" placeholder="请输入新密码">
				</u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="confirmPassword">
				<u--input v-model="passwordForm.confirmPassword" placeholder="请再次输入密码">
				</u--input>
			</u-form-item>
			<view class="code">
				<u-code-input class="codenum" v-model="code" :maxlength="4"></u-code-input>
				<!-- uCode很重要 -->
				<u-code :seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<view class="box" @click="getCode">
					<u-button type="success" size="normal">
						<text>{{tips}}</text>
					</u-button>
				</view>
			</view>
			<u-form-item>
				<u-button type="primary" @click="onConfirm">确认</u-button>
			</u-form-item>
		</u--form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		GetStroage,
		checkMail
	} from "@/utils/tool.js"
	import {
		findPassword,
		sendMail
	} from "@/api/user.js"
	export default {
		data() {
			var surePwd = (rule, value, callback) => { //自定义校验规则
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.passwordForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			}
			return {
				passwordForm: {
					mail: "",
					password: "",
					confirmPassword: "",
				},
				passwordRules: {
					mail: [{
						required: true,
						message: '邮箱是必填的',
						trigger: ['blur', 'change'],
					}],
					password: [{
							required: true,
							message: '密码是必填的',
							trigger: ['blur', 'change'],
						}, {
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['change', 'blur']
						}, // 6-8个字符之间的判断
						{
							min: 6,
							max: 12,
							message: '长度在6-12个字符之间',
							trigger: ['change', 'blur']
						}
					],
					confirmPassword: [{
						required: true,
						message: '确认密码是必填的',
						trigger: ['blur', 'change']
					}, {
						validator: surePwd,
						required: true,
						trigger: ['blur', 'change']
					}]
				},
				code: "",
				tips: "",
				APICode: "",
				msgList: {
					type: "success",
					message: "获取验证码成功"
				}
			}
		},

		methods: {
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			onConfirm() {
				this.$refs.uForm.validate().then(ans => {
					if (this.code == "") {
						this.fillMsg("error", "请填写验证码！")
					} else if (this.APICode == "last") {
						this.fillMsg("error", "验证码已过期，请重新获取！");
					} else if (this.code != this.APICode) {
						this.fillMsg("error", "验证码错误!");
					} else {
						console.log("确认信息", this.passwordForm);
						setTimeout(() => {
							findPassword({
								data: this.passwordForm
							}).then(res => {
								console.log("请求APi接口【/user/findPassword】", res);
								if (res.data.code == "20000") {
									this.fillMsg("success", "找回成功,前往登录页面");
									setTimeout(() => {
										uni.reLaunch({
											url: "/pages/login/login"
										})
									}, 2000)
								}
							})
						}, 500)
					}
				}).catch(err => {
					// this.fillMsg("error", "校验失败");
				})
			},
			getCode() {
				if (this.passwordForm.mail == "") {
					this.fillMsg("error", "请先输入邮箱!");
				} else {
					if (!checkMail(this.passwordForm.mail)) {
						this.fillMsg("error", "请输入正确的邮箱!");
					} else {
						if (this.$refs.uCode.canGetCode) {
							uni.showLoading({
								title: "正在发送验证码"
							})
							setTimeout(() => {
								uni.hideLoading();
							}, 2200)
							sendMail({
								mail: this.passwordForm.mail
							}).then(res => {
								console.log("请求API接口【user/register/sendMailCode】", res);
								if (res.statusCode == 200) {
									this.APICode = res.data;
									console.log("API验证码是:", this.APICode);
									setTimeout(() => {
										this.fillMsg("success", "验证码发送成功,请注意查收!");
										// uni.$u.toast('验证码已发送'); // 这里此提示会被this.start()方法中的提示覆盖
										this.$refs.uCode.start(); // 通知验证码组件内部开始倒计时
									}, 2000);
								} else {
									this.fillMsg("error", "验证码获取失败,邮箱不存在");
								}
							})
						} else {
							// uni.$u.toast('倒计时结束后再发送');
							this.fillMsg("error", "倒计时结束后再发送");
						}
					}
				}
			},
			codeChange(text) {
				this.tips = text;
				// console.log(text);//想知道text可以打印看看
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			end() {
				// uni.$u.toast('倒计时结束');
				this.APICode = "last"; //验证码过期结束
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-image: url('/static//userbackground.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.edit {
		padding: 30rpx;

		.list {
			.code {
				margin: 100rpx 0prx;
				display: flex;
				justify-content: space-between;
				opacity: 1.0;

				.codenum {}

				.box {
					width: 40%;
				}
			}
		}
	}
</style>
